<template>
  <div class="notice-board">
    <template v-if="Array.isArray(notices) && notices.length">
      <el-alert
        v-for="(item, idx) in notices"
        :key="idx"
        :title="item"
        type="info"
        show-icon
        :closable="false"
        class="notice-item"
      />
    </template>
    <template v-else-if="typeof notices === 'string' && notices">
      <el-alert
        :title="notices"
        type="info"
        show-icon
        :closable="false"
        class="notice-item"
      />
    </template>
    <template v-else>
      <el-alert
        title="暂无通知"
        type="info"
        show-icon
        :closable="false"
        class="notice-item"
      />
    </template>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'
const props = defineProps({
  notices: {
    type: [String, Array],
    default: ''
  }
})
</script>

<style scoped>
.notice-board {
  margin-bottom: 16px;
}
.notice-item + .notice-item {
  margin-top: 8px;
}
</style> 